<template>
	<view class="container">
		<image class="img" src="@/static/afterBorrowing/saomahou_bg01.png" mode="aspectFill"></image>
		<view class="info">
			<view class="title">
				充电宝<text>适配所有手机</text>型号
			</view>
			<view class="icons">
				<view class="icon">
					<image class="icon1" src="@/static/dotIntro/outlets_icon03.png" mode="aspectFill"></image>
					<text>苹果</text>
				</view>
				<view class="icon">
					<image class="icon2" src="@/static/dotIntro/outlets_icon04.png" mode="aspectFill"></image>
					<text>安卓</text>
				</view>
				<view class="icon">
					<image class="icon3" src="@/static/dotIntro/outlets_icon05.png" mode="aspectFill"></image>
					<text>Type-c</text>
				</view>
			</view>
			<view class="tips">
				<image class="icon1" src="@/static/afterBorrowing/saomahou_icon01.png" mode=""></image>
				<text>5分钟免费时长，超出即按每小时2元计费，不足1小时按1小时计算，每24小时30元封顶</text>
			</view>
			<view class="tips">
				<image class="icon2" src="@/static/afterBorrowing/saomahou_icon02.png" mode=""></image>
				<text>全国通借通还，可查看附近可借还网点</text>
			</view>
			<view class="ysxy">
				点击即同意<text>《用户协议》《隐私政策》</text>
			</view>
			<view class="but_style1">
				<view class="text1">申请免押金使用</view>
				<view class="text2">(芝麻信用分550分及以上有机会)</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
	page {
		background: #f4f6f9;
	}

	.container {
		width: 100%;
		height: 100vh;
		position: relative;

		.img {
			width: 100%;
			height: 520rpx;
		}

		.info {
			width: 100%;
			padding: 45rpx 75rpx;
			background-color: #f4f6f9;
			border-radius: 35px 35px 0px 0px;
			position: absolute;
			top: 460rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: 24px;
				letter-spacing: 3px;
				color: #000000;
				font-weight: bold;

				text {
					color: #19bff0;
				}
			}

			.icons {
				width: 100%;
				height: 62rpx;
				background-color: #d6d7d9;
				border-radius: 15rpx;
				margin: 25rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 12px;
				

				.icon {
					display: flex;
					align-items: center;

					.icon1 {
						width: 29rpx;
						height: 35rpx;
						margin-right: 8rpx;
					}

					.icon2 {
						width: 29rpx;
						height: 33rpx;
						margin-right: 8rpx;
					}

					.icon3 {
						width: 29rpx;
						height: 30rpx;
						margin-right: 8rpx;
					}
				}
			}

			.tips {
				width: 100%;
				display: flex;
				align-items: center;
				color: #2c2c2c;
				font-size: 10px;
				margin-top: 15rpx;

				.icon1 {
					width: 39rpx;
					height: 36rpx;
					flex-shrink: 0;
					margin-right: 15rpx;
				}
				
				.icon2 {
					width: 38rpx;
					height: 23rpx;
					flex-shrink: 0;
					margin-right: 15rpx;
				}
			}
			
			.ysxy {
				font-size: 11px;
				color: #000000;
				letter-spacing: 1px;
				margin-top: 55rpx;
				
				text {
					color: #17c6ff;
				}
			}
			
			.but_style1 {
				width: 662rpx;
				height: 96rpx;
				background-image: linear-gradient(to bottom, #47b3ff, #3775f6);
				box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
				border-radius: 96rpx;
				color: #ffffff;
				margin-top: 20rpx;
				text-align: center;
				
				.text1 {
					font-size: 17px;
					margin-top: 10rpx;
				}
				
				.text2 {
					font-size: 10px;
				}
			}
		}
	}
</style>